<template>
	<view class="feedback-form-bg">
		<view class="feedback-form-card">
			<!-- 类型选择 -->
			<view class="form-section">
				<view class="type-radio-group">
					<view v-for="item in typeOptions" :key="item.value"
						:class="['type-radio', form.type === item.value ? 'type-radio-active' : '']"
						@click="form.type = item.value">
						<view class="circle">
							<view v-if="form.type === item.value" class="circle-inner"></view>
						</view>
						<text>{{ item.label }}</text>
					</view>
				</view>
			</view>

			<!-- 标题输入 -->
			<view class="form-section">
				<input v-model="form.title" placeholder="请输入标题" class="form-input" maxlength="30" />
			</view>

			<!-- 内容描述 -->
			<view class="form-section">
				<textarea v-model="form.content" placeholder="请输入你的描述" class="form-textarea" maxlength="500" />
			</view>

			<!-- 是否产生成交金额 -->
			<view class="form-section">
				<view class="form-label">是否产生成交金额</view>
				<view class="type-radio-group">
					<view :class="['type-radio', !form.hasMoney ? 'type-radio-active' : '']"
						@click="handleMoneyChange(false)">
						<view class="circle">
							<view v-if="!form.hasMoney" class="circle-inner"></view>
						</view>
						<text>否</text>
					</view>
					<view :class="['type-radio', form.hasMoney ? 'type-radio-active' : '']"
						@click="handleMoneyChange(true)">
						<view class="circle">
							<view v-if="form.hasMoney" class="circle-inner"></view>
						</view>
						<text>是</text>
					</view>
					<input v-if="form.hasMoney" v-model="form.money" type="number" placeholder="请输入"
						class="form-input money-input" maxlength="10" />
					<text v-if="form.hasMoney" class="unit">元</text>
				</view>
			</view>

			<!-- 上传图片 -->
			<view class="form-section">
				<view class="form-label">上传照片</view>
				<drag-image :number="9" :borderRadius="12" v-model="form.images" :addImage="addImages">
					<template v-slot:upload>
						<view class="upload-box" @click="uploadImage">
							<text class='iconfont icon-icon25201' style="font-size: 60rpx;"></text>
							<text class="upload-text">上传图片</text>
						</view>
					</template>
				</drag-image>
				<view class="upload-tip">至少1张图片，第一张为封面图，拖动排序</view>
			</view>

			<!-- 建议/愿景 -->
			<view class="form-section">
				<textarea v-model="form.suggest" placeholder="贵商平台愿景或建议（可选）" class="form-textarea" maxlength="500" />
			</view>
			
			<!-- 驳回原因提示 -->
			<view class="form-section reject-reason" v-if="isEdit && rejectReason">
				<view class="reject-reason-title">驳回原因：</view>
				<view class="reject-reason-content">{{ rejectReason }}</view>
			</view>
		</view>

		<!-- 提交按钮 -->
		<view class="form-btn-bar">
			<button class="form-submit-btn" @click="handleSubmit">{{ isEdit ? '重新提交' : '立即提交' }}</button>
		</view>
	</view>
</template>

<script>
	import {
		PlatformFeedBacksSave,
		PlatformFeedBackDetail
	} from "@/api/extend.js"
	import dragImage from '@/pages/extend/components/shmily-drag-image/components/shmily-drag-image/shmily-drag-image.vue'
	export default {
		components: {
			dragImage
		},
		data() {
			return {
				typeOptions: [{
						label: '沙龙感想',
						value: 1
					},
					{
						label: '贵商反馈',
						value: 2
					},
					{
						label: '贵商寄语',
						value: 3
					}
				],
				form: {
					id: 0, // 默认为创建新记录
					type: 1, // 默认沙龙感想
					title: '',
					content: '',
					hasMoney: false,
					money: 0,
					images: [],
					suggest: ''
				},
				isEdit: false, // 是否为编辑模式
				rejectReason: '' // 驳回原因
			}
		},
		onLoad(options) {
			// 如果传入id参数，则加载已有的反馈内容
			if (options.id) {
				this.form.id = parseInt(options.id);
				this.isEdit = true;
				this.loadFeedbackData(this.form.id);
			}
		},
		methods: {
			loadFeedbackData(id) {
				uni.showLoading({
					title: '加载中...'
				});
				
				PlatformFeedBackDetail({
					id: id
				}).then(res => {
					uni.hideLoading();
					if (res.status === 200) {
						const data = res.data;
						
						// 填充表单数据
						this.form.type = data.type || 1;
						this.form.title = data.title || '';
						this.form.content = data.content || '';
						this.form.hasMoney = data.money > 0;
						this.form.money = data.money > 0 ? data.money : 0;
						this.form.suggest = data.suggest || '';
						
						// 处理图片数据
						if (data.images) {
							this.form.images = typeof data.images === 'string' ? data.images.split(',') : data.images;
						}
						
						// 保存驳回理由，显示给用户
						this.rejectReason = data.remark || '';
						
					} else {
						uni.showToast({
							title: res.message || '加载数据失败',
							icon: 'none'
						});
					}
				}).catch(err => {
					console.error('获取反馈详情失败', err);
					uni.hideLoading();
					uni.showToast({
						title: '加载失败，请重试',
						icon: 'none'
					});
				});
			},
			handleMoneyChange(hasMoney) {
				this.form.hasMoney = hasMoney;
				if (!hasMoney) {
					this.form.money = 0;
				}
			},
			uploadImage() {
				// 检查上传数量限制
				if (this.form.images.length >= 9) {
					uni.showToast({
						title: '最多只能上传9张图片',
						icon: 'none'
					})
					return;
				}

				// 使用统一的上传工具
				this.$util.uploadImageOne({
					url: 'upload/image',
					count: 6
				}, (res) => {
					if (Array.isArray(res)) {
						this.form.images = [...this.form.images, ...res];
					}
				});
			},
			addImages() {
				this.uploadImage();
			},
			handleSubmit() {
				if (!this.form.title) return uni.showToast({
					title: '请输入标题',
					icon: 'none'
				})
				if (!this.form.content) return uni.showToast({
					title: '请输入描述',
					icon: 'none'
				})
				if (this.form.hasMoney && !this.form.money) return uni.showToast({
					title: '请输入金额',
					icon: 'none'
				})
				if (this.form.images.length === 0) return uni.showToast({
					title: '请至少上传1张图片',
					icon: 'none'
				})

				// 处理图片数据，转为字符串
				let imagesStr = this.form.images.join(',')

				// 构建请求参数
				const params = {
					id: this.form.id, // 0为创建新记录，非0为更新已有记录
					title: this.form.title,
					images: imagesStr,
					content: this.form.content,
					money: this.form.hasMoney ? Number(this.form.money) : 0,
					suggest: this.form.suggest,
					type: this.form.type
				}

				uni.showLoading({
					title: this.isEdit ? '更新中...' : '提交中...'
				})

				PlatformFeedBacksSave(params).then(res => {
					uni.hideLoading()
					if (res.status === 200) {
						uni.showToast({
							title: this.isEdit ? '更新成功' : '提交成功',
							icon: 'success'
						})
						// 提交成功后返回列表页
						setTimeout(() => {
							uni.navigateBack()
						}, 1500)
					} else {
						uni.showToast({
							title: res.message || (this.isEdit ? '更新失败' : '提交失败'),
							icon: 'none'
						})
					}
				}).catch(err => {
					console.error(this.isEdit ? '更新反馈失败' : '提交反馈失败', err);
					uni.hideLoading()
					uni.showToast({
						title: '网络异常，请稍后重试',
						icon: 'none'
					})
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.feedback-form-bg {
		min-height: 100vh;
		background: linear-gradient(180deg, #eaf2ff 0%, #f7fafd 100%);
		padding: 10rpx 0 40rpx 0;
	}

	.feedback-form-card {
		background: #fff;
		border-radius: 32rpx;
		box-shadow: 0 8rpx 32rpx 0 rgba(78, 127, 255, 0.08);
		margin: 32rpx 24rpx 0 24rpx;
		padding: 32rpx 24rpx 16rpx 24rpx;
	}

	.form-section {
		margin-bottom: 32rpx;
	}

	.form-label {
		font-size: 28rpx;
		color: #222;
		font-weight: 600;
		margin-bottom: 16rpx;
	}

	.type-radio-group {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: 32rpx;
	}

	.type-radio {
		display: flex;
		align-items: center;
		font-size: 28rpx;
		color: #888;
		margin-right: 24rpx;
		cursor: pointer;
		transition: color 0.2s;
	}

	.type-radio-active {
		color: #4e7fff;
		font-weight: 600;
	}

	.circle {
		width: 32rpx;
		height: 32rpx;
		border-radius: 50%;
		border: 2rpx solid #c6d6fa;
		margin-right: 12rpx;
		background: #f7fafd;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.type-radio-active .circle {
		border-color: #4e7fff;
		background: #eaf2ff;
	}

	.circle-inner {
		width: 18rpx;
		height: 18rpx;
		border-radius: 50%;
		background: linear-gradient(90deg, #4e7fff 0%, #7db1ff 100%);
	}

	.form-input {
		width: 100%;
		border: none;
		border-radius: 16rpx;
		background: #f7fafd;
		padding: 20rpx 24rpx;
		font-size: 28rpx;
		color: #222;
		margin-top: 8rpx;
		box-sizing: border-box;
		height: 64rpx;
		/* 新增，保证高度足够 */
		line-height: 1.4;
	}

	.money-input {
		width: 180rpx;
		margin-left: 16rpx;
		display: inline-block;
	}

	.unit {
		font-size: 28rpx;
		color: #888;
		margin-left: 8rpx;
	}

	.form-textarea {
		width: 100%;
		min-height: 100rpx;
		border: none;
		border-radius: 16rpx;
		background: #f7fafd;
		padding: 20rpx 24rpx;
		font-size: 28rpx;
		color: #222;
		margin-top: 8rpx;
		box-sizing: border-box;
		resize: none;
	}

	.upload-box {
		width: 180rpx;
		height: 180rpx;
		border: 2rpx dashed #dcdfe6;
		border-radius: 12rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: #f5f7fa;
		transition: all 0.3s;
		margin-right: 20rpx;

		&:active {
			transform: scale(0.95);
		}

		.upload-text {
			font-size: 24rpx;
			color: #909399;
			margin-top: 8rpx;
		}
	}

	.upload-tip {
		font-size: 22rpx;
		color: #b2b2b2;
		margin-top: 8rpx;
	}
	
	.reject-reason {
		background-color: #fff2f0;
		border-radius: 16rpx;
		padding: 24rpx;
		border-left: 4rpx solid #ff4d4f;
		
		.reject-reason-title {
			font-size: 28rpx;
			color: #222;
			font-weight: 600;
			margin-bottom: 12rpx;
		}
		
		.reject-reason-content {
			font-size: 26rpx;
			color: #ff4d4f;
			line-height: 1.5;
		}
	}

	.form-btn-bar {
		margin: 48rpx 24rpx 0 24rpx;
	}

	.form-submit-btn {
		width: 100%;
		background: linear-gradient(90deg, #4e7fff 0%, #7db1ff 100%);
		color: #fff;
		font-size: 32rpx;
		border-radius: 40rpx;
		padding: 28rpx 0;
		font-weight: 600;
		border: none;
		box-shadow: 0 4rpx 16rpx 0 rgba(78, 127, 255, 0.10);
	}
</style>